<template>
  <div>
    <Navitem />
    <el-tabs
      tab-position="right"
      style="height: 100%; margin-right: 150px"
      @tab-click="doTo($event)"
    >
      <el-tab-pane
        :label="item.name"
        v-for="(item, index) in childList"
        :key="index"
      ></el-tab-pane>
      <router-view></router-view>
    </el-tabs>
  </div>
</template>

<script>
import Navitem from './navitem.vue'
export default {
  name: 'NalimalHistory',
  components: { Navitem },
  data() {
    return {
      childList: null,
    }
  },
  created() {
    this.doTo()
  },
  beforeMount() {},
  mounted() {},

  methods: {
    doTo(e) {
      const RouterList = this.$router.options.routes.filter((item) => {
        if (item.name === '自然历史') {
          return item
        }
      })
      this.childList = RouterList[0].children
      switch (e.index) {
        case '0':
          this.$router.push('/modern')
          break
        case '1':
          this.$router.push('/DidOut')
          break
        case '2':
          this.$router.push('/achievement')
          break
      }
    },
  },
}
</script>

<style>
.container {
  height: 500px;
  width: 1000px;
  background-color: aquamarine;
}
</style>
